/* ------------------------整体页面布局 */
body {
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    color: #666;
    font-size: 14px;
    font-family: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    line-height: 1.5;
}

/* ------------------------特殊样式 */
* {
    -webkit-tap-highlight-color: transparent;
}
input {
    -webkit-appearance: none;
}
img,
a {
    -webkit-touch-callout: none;
}

/* ------------------------通用样式 */
.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    /* 去除图片留白 */
    vertical-align: middle;
}

a {
    color: #666;
    text-decoration: none;
}

div {
    box-sizing: border-box;
}

/* ------------------------顶部快捷导航栏 */
.app {
    height: 45px;
}
.app ul li {
    float: left;
    height: 45px;
    background-color: #333;
    color: #fff;
    text-align: center;
    line-height: 45px;
}
.app ul li:nth-child(1) {
    width: 8%;
}
.app ul li:nth-child(1) img {
    width: 10px;
}
.app ul li:nth-child(2) {
    width: 10%;
}
.app ul li:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
}
.app ul li:nth-child(3) {
    width: 57%;
}
.app ul li:nth-child(4) {
    width: 25%;
    background-color: #ff440d;
}

/* ----------------------------搜索栏 */
.search-box {
    /* 父相子绝 */
    /* position: relative; */
    /* 使用固定定位才合适，可以压着轮播图，同时它也保留了父相子绝特性 */
    position: fixed;

    /* 解决上外边距塌陷问题 */
    overflow: hidden;
    
    /* 固定定位必须设置宽度 */
    width: 100%;
    /* 别忘记限制范围 */
    min-width: 320px;
    max-width: 640px;

    height: 44px;
}

.search-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 44px;
}
.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    margin: 14px 0 0 15px;
    background: url(../images/s-btn.png) no-repeat;
    background-size: 20px 18px;
}

.search-login {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 44px;
    color: #fff;
    line-height: 44px;
}

.search {
    position: relative;
    height: 30px;
    /* 上外边距会引起塌陷问题，所以给父容器设置溢出隐藏解决塌陷 */
    margin: 7px 50px 0 50px;
    background-color: #fff;
    border-radius: 15px;
}

.jd-ico {
    position: absolute;
    top: 8px;
    left: 13px;
    width: 20px;
    height: 15px;
    background: url(../images/jd-ico.png) no-repeat;
    background-size: 20px 15px;
}
.jd-ico::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -8px;
    width: 1px;
    height: 15px;
    background-color: #ccc;
}

.jd-search {
    position: absolute;
    top: 8px;
    left: 50px;
    width: 18px;
    height: 15px;

    /* 二倍精灵图 */
    /* 提供的图片是2倍大小的图片 */
    background: url(../images/jd-sprites.png) no-repeat;
    
    /* 图片在ps中缩小2倍后的距离坐标才是需要的距离坐标（或者2倍图时坐标的一半） */
    /* background: url(../images/jd-sprites.png) no-repeat -80px 0; */
    background-position: -80px 0;

    /* 图片缩小2倍后的大小，只能用精确值，不能用50% */
    /* background-size: 200px; */
    background-size: 200px auto;
}

/* ----------------------------主体内容模块 */
/* ---------------轮播图 */
.slider img {
    width: 100%;
}

/* ---------------品牌栏 */
.brand {
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}
.brand div{
    float: left;
    width: 33.33%;
}
.brand div img{
    width: 100%;
}

/* ---------------导航栏 */
nav {
    padding-top: 5px;
}
nav a {
    float: left;
    width: 20%;
    text-align: center;
}
nav a img {
    width: 40px;
    margin: 10px 0;
}
nav a span {
    display: block;
}

/* ---------------秒杀/推荐/资讯快报 */
.news {
    /* 给父容器、或在前面的容器清除浮动，否则塌陷，影响后面的布局 */
    /* 给nav那里加上clearfix，记得引入clearfix样式 */
    /* 自己也需要，因为它也是高度自适应的，也会影响后来的布局 */
    margin-top: 20px;
}
.news a {
    float: left;
    /* CSS3模型 */
    box-sizing: border-box;
}
.news a:nth-child(1) {
    width: 50%;
}
.news a:nth-child(n+2) {
    width: 25%;
    /* 会撑大盒子，导致掉下来，需要CSS3盒子模型 */
    border-left: 1px solid #ccc;
}
.news a img {
    width: 100%;
}

/* ---------------产品列表 */

/* ----------------------------底部栏模块 */